/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
  <div class="common-progress" :style="{height: width + 'px', width: width + 'px'}">
    <div class="common-progress-circle" :style="{height: width + 'px', width: width + 'px'}">
      <svg viewBox="0 0 100 100">
        <path class="common-progress-circle__track"
              :d="trackPath"
              stroke="#e5e9f2"
              :stroke-width="relativeStrokeWidth"
              fill="none"
        ></path>
        <path class="common-progress-circle__path"
              :d="trackPath"
              stroke-linecap="round"
              :stroke="stroke"
              :stroke-width="relativeStrokeWidth"
              fill="none"
              :style="circlePathStyle"></path>
      </svg>
    </div>
    <div class="common-progress__text" :style="{'font-size': fontSize+'px'}">
        <odometer-box :value="count"/>
    </div>
  </div>
</template>

<style lang='stylus'>
.common-progress
    position relative
    .common-progress-circle
        position: relative;
        line-height: 1;
        display inline-block
    .common-progress__text
        position absolute
        top 50%
        left 0
        width 100%
        display: inline-block;
        text-align center
        margin 0
        transform translateY(-50%)
        vertical-align middle
        line-height 1
</style>
<script lang="ts">

/**
 * created by sch
 */

import { Component, Vue, Prop } from 'vue-property-decorator';
import OdometerBox from 'src/components/odometer.vue';

@Component({
    components: {
        OdometerBox
    }
})
export default class CircleProgress extends Vue {
    @Prop({
        type: Number,
        default: 0
    }) percentage!: number

    @Prop({
        type: Number,
        default: 0
    }) count!: number

    @Prop({
        type: Number,
        default: 26
    }) fontSize!: number

    @Prop({
        type: Number,
        default: 3
    }) strokeWidth!: number

    @Prop({
        type: Number,
        default: 60
    }) width!: number

    @Prop({
        type: String,
        default: '#ee5555'
    }) color!: string



    /* eslint-disable */
    get relativeStrokeWidth () {
        return ((this.strokeWidth / this.width) * 100).toFixed(1);
    }
    get trackPath () {
        const radius = parseInt((50 - parseFloat(this.relativeStrokeWidth + '') / 2)+'', 10);

        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius *2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
    }
    get perimeter () {
        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
        return 2 * Math.PI * radius;
    }
    get circlePathStyle () {
        const perimeter = this.perimeter;
        return {
            strokeDasharray: `${perimeter}px,${perimeter}px`,
            strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
            transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
        };
    }
    get stroke () {
        return this.color;
    }
};
</script>